<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>融媒体内容生产方法与实践</title>
    <style>
        body {
            background-image: url(resource//img/NationalDay2022_ZH-CN3861603311_1920x1080.jpg);
        }

        .container {
            width: 80%;
            max-width: 1000px;
            margin: 0 auto;
        }

        /* 标题样式 */
        .title {
            text-align: center;
            margin: 64px 0;
        }

        .flex-box {
            display: flex;
            flex-wrap: wrap;
        }

        ul.flex-box {
            list-style: none;
            gap: 16px 16px;
            padding-inline-start: 0;
        }

        ul.flex-box li {
            width: 23%;
            height: 200px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 3px 3px 2px 1px rgba(76, 76, 76, 0.2);
            position: relative;
        }

        ul.flex-box li a {
            text-decoration: none;
            background-image: linear-gradient(143deg, #fad961e4 0%, #f76c1cdd 100%);
            ;
            width: 90%;
            text-align: center;
            line-height: 3;
            color: #000;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #html-e {
            background-image: url(https://tse4-mm.cn.bing.net/th/id/OIP-C.x8pweKmrsrp_O3WgkX-yyQHaE6?pid=ImgDet&rs=1);
        }

        #css-basic {
            background-image: url(https://openclipart.org/image/2400px/svg_to_png/171251/CSS-Rule.png);
            background-size: cover;
            background-repeat: no-repeat;
        }

    </style>
</head>

<body>
    <div class="container">

        <h1 class="title">融媒体内容生产方法与实践</h1>

        <!-- <ol>
            <li><a href="01-html.html">HTML元素练习</a></li>
        </ol> -->

        <ul class="flex-box">
            <li id="html-e"><a href="html.html">HTML元素练习</a></li>
            <li id="css-basic"><a href="02-css.html">CSS文字排版练习</a></li>
            <li><a href="03-css-bg-box.html">CSS背景、变量、盒模型练习</a></li>
            <li><a href="04-position-flex.html">CSS定位及布局练习</a></li>
            <li><a href="html.html">HTML元素练习</a></li>
            <li><a href="02-css.html">CSS文字排版练习</a></li>
            <li><a href="03-css-bg-box.html">CSS背景、变量、盒模型练习</a></li>
            <li><a href="04-position-flex.html">CSS定位及布局练习</a></li>
            <li><a href="html.html">HTML元素练习</a></li>
            <li><a href="02-css.html">CSS文字排版练习</a></li>
            <li><a href="03-css-bg-box.html">CSS背景、变量、盒模型练习</a></li>
            <li><a href="04-position-flex.html">CSS定位及布局练习</a></li>
        </ul>
    </div>

</body>

</html>
